<template>
	<view class="rate-box">
		<view class="rate-header">交易费率</view>
		<!-- 交易费率 -->
		<view class="rate-table">
			<view class="rate-table-td">
				<text>支付类型</text>
				<text>费率</text>
				<text>封顶</text>
			</view>
			<view class="rate-table-tr" v-for="(item,index) in rateList" :key="item.payTypeId">
				<text>{{item.payTypeName}}</text>
				<text>{{item.mercCardRate}}%</text>
				<text>{{$u.test.isEmpty(item.mercCardTop) ? '/' : `${item.mercCardTop}元/笔`}}</text>
			</view>
		</view>
		<!-- 额度筛选 -->
		<view class="rate-filter">
			<view class="rate-filter-item" @tap="selectTypeAction(0)">
				<text>单笔额度</text>
				<view class="rate-filter-line" v-if="selectType == 0"></view>
			</view>
			<view class="rate-filter-item" @tap="selectTypeAction(1)">
				<text>单日额度</text>
				<view class="rate-filter-line" v-if="selectType == 1"></view>
			</view>
		</view>
		<!-- 单笔/单日额度 -->
		<view class="rate-table">
			<view class="rate-table-td">
				<text>{{selectType == 0 ? '单笔' : '单日'}}额度</text>
				<text>D0额度</text>
				<text>T1额度</text>
			</view>
			<view class="rate-table-tr" v-for="(item,index) in edData" :key="index">
				<text>{{item.payTypeName}}</text>
				<text>{{item.mercCardRate}}</text>
				<text>{{item.mercCardTop}}</text>
			</view>
		</view>
		<!-- 备注 -->
		<view class="rate-remark">
			<text>主：</text>
			<view class="rate-remark-box">
				<text>1.磁条卡认证，首次需认证本人信用卡，提高额度；</text>
				<text>2.最低交易金额限制5元；</text>
				<text>3.T1出款时间：工作日上午11点与下午4点左右；</text>
				<text>4.微信、京东白条-暂不支持；</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { rateData } from '@/config/data.js'
	import { getTradeRateInfo } from '@/config/api.js'
	import { useUserStore } from '@/stores'
	const userStore = useUserStore()
	
	const selectType = ref(0)
	const selectTypeAction = (type)=>{
		selectType.value = type
		getEdData()
	}
	//单笔/单日额度数据
	let edData = ref(rateData.singleQuotaData)
	//获取额度数据
	const getEdData = ()=>{
		if(selectType.value == 0){
			edData.value = rateData.singleQuotaData
		}
		else{
			edData.value = rateData.dayQuotaData
		}
	}
	//交易费率数据
	let rateList = ref([])
	//获取交易费率数据
	const getTradeRateData = async ()=>{
		const res = await getTradeRateInfo({'merId':userStore.user.merId})
		rateList.value = res.result
	}
	onLoad(()=>{
		getTradeRateData()
	})
</script>

<style lang="scss" scoped>
.rate-box{
	.rate-header{
		display: flex;
		align-items: center;
		background-color: $xh-bg-color;
		height: 100rpx;
		padding: 0 30rpx;
		font-size: 30rpx;
		color: $xh-color-606266;
		font-weight: 500;
	}
	.rate-table{
		background-color: white;
		.rate-table-td{
			display: flex;
			align-items: center;
			color: $xh-title-color;
			font-size: 30rpx;
			font-weight: 500;
			height: 84rpx;
			text{
				text-align: center;
				flex: 1;
			}
			text:nth-child(1){
				flex: 1.5;
			}
		}
		.rate-table-tr{
			display: flex;
			align-items: center;
			color: $xh-title-color;
			font-size: 26rpx;
			height: 84rpx;
			text{
				text-align: center;
				flex: 1;
			}
			text:nth-child(1){
				flex: 1.5;
			}
		}
	}
	.rate-filter{
		display: flex;
		align-items: center;
		background-color: $xh-bg-color;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: $xh-color-606266;
		.rate-filter-item{
			padding: 30rpx 0;
			position: relative;
			.rate-filter-line{
				background-color: $xh-theme-color;
				position: absolute;
				left: 20rpx;
				right: 20rpx;
				bottom: 16rpx;
				height: 6rpx;
				border-radius: 3rpx;
			}
		}
		.rate-filter-item:nth-child(2){
			margin-left: 30rpx;
		}
	}
	.rate-remark{
		display: flex;
		padding: 30rpx;
		font-size: 24rpx;
		color: $xh-color-606266;
		.rate-remark-box{
			display: flex;
			flex-direction: column;
			text{
				margin-bottom: 5rpx;
			}
		}
	}
}
</style>
